$link_color: black;
$link_space: 20px;
$header_height: 75px;
$font_color: #333;
$snall_link_space: 10px;
body {
  font-size: 14px;
  padding-bottom: 70px;
}

#golbal-header {
  height: $header-height;
  width: 100%;
  background: rgba(240, 240, 240, 0.85);
  background-image: linear-gradient(to top, rgba(#fbc2eb, 0.2) 0%, rgba(#a6c1ee, 0.2) 100%);
  color: $font_color;
  .container {
    margin: 0 auto;
    width: 68%;
    height: 100%;
    @media screen and (max-width: 1400px) {
      width: 78%;
    }
    @media screen and (max-width: 980px) {
      width: 88%;
    }
    @media screen and (max-width: 580px) {
      width: 94%;
    }
    .useflex {
      transform: translateY(-8%);
      height: 100%;
      width: 100%;
      display: flex;
      justify-content: space-between;
      align-items: flex-end;
      .header-brand {
        font-size: 2rem;
        h1 {
          font-weight: 400;
        }
      }
      nav {
        ul {
          list-style: none;
          display: flex;
          li {
            padding: 5px $link_space;
            @media screen and (max-width: 580px) {
              padding: 5px $snall_link_space;
            }
            @media screen and (max-width: 480px) {
              display: none;
            }
            &:hover {
              transform: translateY(-20);
              transition: all 1s;
            }
            a {
              text-decoration: none;
              color: $link_color;
              font-size: 1.4rem;
              margin-top: -5px;
            }
          }
        }
      }
    }
  }
}

#cy-background {
  position: relative;
  z-index: -1;
  margin-top: -$header_height;
  height: 60vh;
  width: 100%;
  background-image: url("./images/background.webp");
  background-position: top center;
  background-attachment: fixed;
  background-size: cover;
}

.golbal-container {
  width: 58%;
  margin: 0 auto;
  margin-top: -35vh;
}

ul.transition {
    list-style: none;
    display: flex;
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    margin: 0;
    pointer-events: none;
    z-index: 99999;
}

ul.transition li {
    transform: scaleY(0);
    background-color: white;
    width: 20%;
}